import React from 'react';
import { Col, Row, Form, Button } from 'antd';
import styles from './IndexContact.less';

const IndexContact: React.FC = () => {
  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <div className={styles.headTitle}>联系我们</div>
        <Row justify="center">
          <Col span={12}>
            <div className={styles.contactLabel}>联系信息</div>
            <div className={styles.contactItem}>
              普陀区铜川路68-2 创邑space 316室 上海市，中国 200333
            </div>
            <div className={styles.contactItem}>
              400 821 9199
              <br />
              +86 21 62662533
            </div>
            <div className={styles.contactItem}>
              hello@seepln.com <br />
              www.seepln.com
            </div>
          </Col>
          <Col span={12}>
            <Form>
              <div className={styles.formInner}>
                <Row gutter={35}>
                  <Col span={12}>
                    <Form.Item className={styles.formItem} name="name" rules={[{ required: true }]}>
                      <img src="images/index/contact_1.png" alt="" />
                      <input placeholder="姓名" />
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item className={styles.formItem} name="tel" rules={[{ required: true }]}>
                      <img src="images/index/contact_2.png" alt="" />
                      <input placeholder="联系电话" />
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item
                      className={styles.formItem}
                      name="email"
                      rules={[{ required: true }]}
                    >
                      <img src="images/index/contact_3.png" alt="" />
                      <input placeholder="公司邮箱" />
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item
                      className={styles.formItem}
                      name="company"
                      rules={[{ required: true }]}
                    >
                      <img src="images/index/contact_4.png" alt="" />
                      <input placeholder="公司名称" />
                    </Form.Item>
                  </Col>
                  <Col span={24}>
                    <Form.Item className={styles.formItem} name="description">
                      <img src="images/index/contact_5.png" alt="" />
                      <input placeholder="描述信息" />
                    </Form.Item>
                  </Col>
                </Row>
                <Row justify="end">
                  <Col>
                    <Button className={styles.submit} type="primary" htmlType="submit">
                      点击发送
                    </Button>
                  </Col>
                </Row>
              </div>
            </Form>
          </Col>
        </Row>
      </div>
    </div>
  );
};

export default IndexContact;
